<template>
    <div class="exam-detail" :class="{ 'is-mobile': $isMobile }">
        <div class="exam-header">错题解析</div>
        <div class="exam-detail__content" v-loading="loading">
            <div class="exam-detail__content__left">
                <menu-card :datas="exams" :userAnswers="answers" type="result" @itemClick="itemClick"
                    :activeIndex="activeIndex">
                </menu-card>
            </div>

            <div class="exam-detail__content__right">
                <question-list :datas="exams" :userAnswers="answers" @itemClick="itemClick" type="result"
                    :activeIndex="activeIndex" />
            </div>
        </div>
    </div>
</template>


<script>
import menuCard from "./components/menu-card.vue"
import questionList from "./components/list.vue"
import { calcStatus, formatExams } from './calc.js'
export default {
    components: {
        menuCard,
        questionList,
    },

    data() {
        return {
            activeIndex: 0,
            loading: false,
            exams: [],
            answers: [],
        }

    },

    mounted() {
        this.init();
    },


    methods: {

        async init() {
            const loading = this.$loading();

            const { examId } = this.$route.query;
            let { data } = await this.$fetch.get(`/api/topic-lesson-exams/get`, { id: examId });
            let { exams, answers } = formatExams(data)

            this.answers = answers;
            this.exams = calcStatus(exams, answers)
            loading.close()
        },


        itemClick(index) {
            this.activeIndex = index;
            const targetElement = document.querySelector(`.exam-question-${index + 1}`);
            const parentElement = document.querySelector(".exam-detail__content__right")


            if (targetElement && parentElement) {
                const targetTop = targetElement.offsetTop;
                const parentTop = parentElement.offsetTop;
                const relativeTop = targetTop - parentTop;


                parentElement.scrollTo({
                    top: relativeTop,
                    left: 0,
                    behavior: 'smooth'
                });
            }



        },



    },


}
</script>


<style lang="less" scoped>
.exam-detail {
    background: #FFFFFF;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);

    .exam-header {
        padding-top: 22px;
        padding-bottom: 19px;
        padding-left: 30px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
        line-height: 30px;
        text-align: left;
        font-style: normal;
        border: 0.5px solid #EFEFEF;
    }

    .exam-detail__content {
        display: flex;
        flex: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
        overflow: hidden;

        .exam-detail__content__left {
            width: 252px;
            background: #F8F9FB;
            border-right: 1px solid #EFEFEF;
        }

        .exam-detail__content__right {
            background: #fff;
            margin: 30px 30px 30px 60px;
            flex: 1;
            overflow-y: auto;
        }
    }
}

.exam-submit {
    background: #F8F9FB;
    padding-top: 24px;
    padding-bottom: 21px;

    .exam-submit__time {
        padding-left: 30px;
        display: flex;
        flex-direction: row;
        margin-bottom: 30px;

        .calcTime {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 22px;
            color: #333333;
            line-height: 30px;
            height: 30px;
            text-align: left;
            font-style: normal;
            padding-right: 12px;
            border-right: 1px solid #D8D8D8;
        }

        .iconfont {
            width: 30px;
            height: 30px;
            margin-left: 15px;
            background: url(../../assets/pause.svg) no-repeat center center;
            background-size: 30px 30px;

            &.pauseStatus {
                background: url(../../assets/play-pause.svg) no-repeat center center;
                background-size: 30px 30px;

            }
        }



    }

    .submit__btn {
        background: #3560AB;
        border-radius: 8px;
        padding: 8px 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 22px;
        text-align: center;
        font-style: normal;
        cursor: pointer;
    }

}

.exam-detail.is-mobile {
    height: calc(100vh - 60px);

    .exam-header {
        padding: 10px;
        font-size: 18px;
        font-weight: bolder;
        line-height: 28px;

    }


    .exam-detail__content {
        display: flex;
        position: relative;
        .exam-detail__content__left {
            width: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            /deep/ .question-label {
                padding: 0;

                .label-title {
                    padding: 4px;
                    padding-left: 10px;
                }

                .label-summary {
                    padding: 4px;
                    margin-bottom: 8px;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;


                    .label-summary__item  {
                        margin-top: 8px;
                    }
                }

                .label-item—key {
                    width: fit-content;
                    margin-bottom: 10px;
                    margin-left: 10px;                    
                    span {
                        margin: 0px;
                    }
      
                }

            }

 

        }

        .exam-detail__content__right {
            margin: 10px;
            overflow-y: auto;
        }
    }

}
</style>
